<template>
    <div class="com-container">
        <div class="header">
            <div class="title">
                <span style="color: #fbefd5; font-weight: 600;">条目监控</span>
                <div class="title-icon"></div>
            </div>
        </div>
        <div class="content">
            <div class="left-content">
                <span class="content-title">条目</span>
                <!-- 条目状态 -->
                <div class="left-content-item" style="height: 30%">
                    <div class="item-title">
                        <span class="left-item-title">条目状态</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('条目状态')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('条目状态')"></div>
                    </div>
                    <div class="chart-label">
                        <div class="chart-label-item">
                            <span>条目启用数:</span>
                            <span style="color: #17ecd8">{{ handleShowCount(itemStatusData, 0) }}</span>
                        </div>
                        <div class="chart-label-item">
                            <span>条目禁用数:</span>
                            <span style="color: #d0021b">{{ handleShowCount(itemStatusData, 1) }}</span>
                        </div>
                    </div>

                    <ItemLiquidFill ref="itemStatus" :info="handleChartData('条目状态')" :color="'#17ecd8'" />
                </div>

                <!-- 条目同步概况 -->
                <div class="left-content-item">
                    <div class="item-title">
                        <span class="left-item-title">条目同步概况</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('条目同步概况')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('条目同步概况')"></div>
                    </div>
                    <div class="chart-label">
                        <div class="chart-label-item">
                            <span>同步成功次数:</span>
                            <span style="color: #17ecd8">{{ handleShowCount(itemSyncOverviewData, 0) }}</span>
                        </div>
                        <div class="chart-label-item">
                            <span>同步失败次数:</span>
                            <span style="color: #d0021b">{{ handleShowCount(itemSyncOverviewData, 1) }}</span>
                        </div>
                    </div>
                    <ItemLiquidFill ref="itemSyncOverview" :info="handleChartData('条目同步概况')" :color="'#f4a101'" />
                </div>
                <!-- 条目配置参数概况 -->
                <div class="left-content-item">
                    <div class="item-title">
                        <span class="left-item-title">条目配置参数概况</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('条目配置参数概况')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('条目配置参数概况')"></div>
                    </div>
                    <div class="chart-label">
                        <div class="chart-label-item">
                            <span>参数不支持数:</span>
                            <span style="color: #d0021b">{{ handleShowCount(entryConfigData, 0) }}</span>
                        </div>
                        <div class="chart-label-item">
                            <span>参数支持数:</span>
                            <span style="color: #17ecd8">{{ handleShowCount(entryConfigData, 1) }}</span>
                        </div>
                        <div class="chart-label-item">
                            <span>参数部分支持数:</span>
                            <span style="color: #f7cf7f">{{ handleShowCount(entryConfigData, 2) }}</span>
                        </div>
                    </div>
                    <ItemLiquidFill ref="entryConfig" :info="handleChartData('条目配置参数概况')" :color="'#7848d0'" />
                </div>
            </div>
            <div class="center-content">
                <!-- 条目同步走势 -->
                <div class="center-content-item">
                    <span class="center-item-title">
                        条 目 同 步 走 势
                    </span>
                    <!-- <div class="chart-btn1" style="left: 45%">
                        <div class="chart-btn-refresh" @click="refresh('条目同步走势')"></div>
                    </div> -->
                    <div>
                        <ItemLine
                            :info="handleChartData('条目同步走势')"
                            :data="itemSyncLineData"
                            :riskEntryTypeObj="riskEntryTypeObj"
                            :dateTimeData="dateTimeData"
                            @generate-trend="generateTrend"
                            ref="itemSyncTrend"
                            @refresh="refresh('条目同步走势')"
                            @getDetailDataChange="getDetailDataChange"
                        ></ItemLine>
                    </div>
                </div>
                <!-- 条目同步参数 -->
                <div class="center-content-item">
                    <span class="center-item-title">
                        条 目 同 步 参 数
                    </span>
                    <div class="chart-btn1" style="right: 4%">
                        <div class="chart-btn-refresh" @click="refresh('条目同步参数')"></div>
                    </div>
                    <div>
                        <Item3DBar
                            :info="handleChartData('条目同步参数')"
                            :data="itemSyncParamsData"
                            :riskEntryTypeObj="riskEntryTypeObj"
                            ref="itemSyncParam"
                            @getDetailDataChange="getDetailDataChange"
                        ></Item3DBar>
                    </div>
                </div>
            </div>
            <div class="right-content">
                <span class="content-title">参数</span>
                <!-- 特殊计算项 -->
                <div class="right-content-item">
                    <div class="item-title">
                        <span class="left-item-title">特殊计算项</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('特殊计算项')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('特殊计算项')"></div>
                    </div>
                    <!-- 圆环中心文字 -->
                    <div class="pieText">
                        <div id="fake-num1" class="fakeName"></div>
                        <span>{{ this.seriesName1 }}</span>
                        <span>{{ this.seriesvalue1 }}</span>
                    </div>
                    <ItemDynamicPie
                        class="right-item-chart"
                        :title="'特殊计算项'"
                        :data="specialCalculationData.data || []"
                        :info="handleChartData('特殊计算项')"
                        :riskEntryTypeObj="riskEntryTypeObj"
                        type="'special-calculation'"
                        ref="specialCalculation"
                        @getHighlightItem="getHighlightItem(arguments)"
                    ></ItemDynamicPie>
                </div>
                <!-- 分母 -->
                <div class="right-content-item">
                    <div class="item-title">
                        <span class="left-item-title">分母</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('分母')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('分母')"></div>
                    </div>
                    <!-- 圆环中心文字 -->
                    <div class="pieText">
                        <div id="fake-num2" class="fakeName"></div>
                        <span>{{ this.seriesName2 }}</span>
                        <span>{{ this.seriesvalue2 }}</span>
                    </div>
                    <ItemDynamicPie
                        class="right-item-chart"
                        :title="'分母'"
                        :data="denominatorData.data || []"
                        :info="handleChartData('分母')"
                        :riskEntryTypeObj="riskEntryTypeObj"
                        type="'denominator'"
                        ref="denominator"
                        @getHighlightItem="getHighlightItem(arguments)"
                    ></ItemDynamicPie>
                </div>
                <!-- 动态维度模板 -->
                <div class="right-content-item">
                    <div class="item-title">
                        <span class="left-item-title">动态维度模板</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('动态维度模板')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('动态维度模板')"></div>
                    </div>
                    <!-- 圆环中心文字 -->
                    <!-- <div style="position: absolute; width: 100%; height:100%"> -->
                    <div class="pieText">
                        <div id="fake-num3" class="fakeName"></div>
                        <span>{{ this.seriesName3 }}</span>
                        <span>{{ this.seriesvalue3 }}</span>
                    </div>
                    <!-- </div> -->

                    <ItemDynamicPie
                        class="right-item-chart"
                        :title="'动态维度模板'"
                        :data="dynamicDenominatorTempData.data || []"
                        :info="handleChartData('动态维度模板')"
                        :riskEntryTypeObj="riskEntryTypeObj"
                        type="'dynamic-dimension-template'"
                        ref="dynamicDimensionTemplate"
                        @getHighlightItem="getHighlightItem(arguments)"
                    ></ItemDynamicPie>
                </div>
                <!-- 动态维度 -->
                <div class="right-content-item">
                    <div class="item-title">
                        <span class="left-item-title">动态维度</span>
                        <div></div>
                    </div>
                    <div class="chart-btn">
                        <div class="chart-btn-refresh" @click="refresh('动态维度')"></div>
                        <div class="chart-btn-detail" @click="openDetailDialog('动态维度')"></div>
                    </div>
                    <!-- 圆环中心文字 -->
                    <div class="pieText">
                        <div id="fake-num4" class="fakeName"></div>
                        <span>{{ this.seriesName4 }}</span>
                        <span>{{ this.seriesvalue4 }}</span>
                    </div>
                    <ItemDynamicPie
                        class="right-item-chart"
                        :title="'动态维度'"
                        :data="dynamicDenominatorData.data || []"
                        :info="handleChartData('动态维度')"
                        :riskEntryTypeObj="riskEntryTypeObj"
                        type="'dynamic-dimension'"
                        ref="dynamicDimension"
                        @getHighlightItem="getHighlightItem(arguments)"
                    ></ItemDynamicPie>
                </div>
            </div>
        </div>

        <!-- 详情 -->
        <ItemSyncDetail
            :show="detailShow"
            v-if="detailShow"
            :info="info"
            :riskEntryTypeObj="riskEntryTypeObj"
            @item-sync-detail="itemSyncDetailHandle"
            @getDetailDataChange="getDetailDataChange"
        ></ItemSyncDetail>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import ItemBar from './item-monitor/item-bar.vue';
import ItemLine from './item-monitor/item-line.vue';
import ItemPieHollow from './item-monitor/item-pie-hollow.vue';
import ItemPieFilled from './item-monitor/item-pie-filled.vue';
import {
    getDySurvey,
    getDyTemplateSurvey,
    getEntryConfig,
    getFrequency,
    getMappingType,
    getStateSurvey,
    getSyncSurvey,
    querySpecialurvey,
    querySyncParam,
    querySyncTrend,
} from './api/item-monitor';
import * as moment from 'moment';
import ItemLiquidFill from './item-monitor/item-liquidFill.vue';
import Item3DBar from './item-monitor/item-3d-bar.vue';
import ItemDynamicPie from './item-monitor/item-dynamic-pie.vue';
import { NumAutoPlusAnimation, numberFormat } from '@/utils/tools';
import ItemSyncDetail from './item-monitor/item-sync-detail.vue';
@Component({
    name: 'ItemMonitorNew',
    components: {
        // ItemPieHollow,
        // ItemPieFilled,
        ItemLine,
        ItemBar,
        ItemLiquidFill,
        Item3DBar,
        ItemDynamicPie,
        ItemSyncDetail,
    },
})
export default class ItemMonitorNew extends Vue {
    chartInstanceArr: any[] = [];
    chartComponent: any[] = [
        'itemStatus',
        'specialCalculation',
        'denominator',
        'dynamicDimensionTemplate',
        'dynamicDimension',
        'itemSyncOverview',
        'itemSyncTrend',
        'itemSyncParam',
        'entryConfig',
        // 'Item3DBar',
        // 'ItemDynamicPie',
    ];
    specialCalculationData: any = {}; // 特殊计算项
    itemStatusData: any = {}; // 条目状态
    denominatorData: any = {}; // 分母
    dynamicDenominatorData: any = {}; // 动态维度
    dynamicDenominatorTempData: any = {}; // 动态维度模板
    itemSyncOverviewData: any = {}; // 条目同步概况
    itemSyncParamsData: any = {}; // 条目同步参数
    itemSyncLineData: any = {}; // 条目同步走势
    entryConfigData: any = {}; // 条目配置参数概况

    TimeSendMessageFirst = null;
    TimeSendMessageSecond = null;

    riskEntryTypeObj: any = {}; // 类别
    // 走势参数
    lineParams = {
        beginDate: moment(new Date()).format('yyyyMMDD'),
        endDate: moment(new Date()).format('yyyyMMDD'),
    };
    seriesName1: any = '';
    seriesvalue1: any = '';
    seriesName2: any = '';
    seriesvalue2: any = '';
    seriesName3: any = '';
    seriesvalue3: any = '';
    seriesName4: any = '';
    seriesvalue4: any = '';
    percent1: any = '';
    percent2: any = '';
    percent3: any = '';
    percent4: any = '';
    detailShow: boolean = false;
    info: any = {};
    refreshFrequencyData: any[] = [];
    refreshFrequencyPojo: any = {};
    TimerEntryStatus: any = null;
    TimerEntrySync: any = null;
    TimerEntryConfigParam: any = null;
    TimerEntrySyncParam: any = null;
    TimerEntrySyncTrend: any = null;
    TimerSpecial: any = null;
    TimerDenominator: any = null;
    TimerDyTemplate: any = null;
    TimerDynamic: any = null;
    mappingTypes: any[] = [];
    dateTimeData: any[] = []; // 条目同步参数横轴时间

    async mounted() {
        this.getAllChartsData();
        // this.queryMappingType();

        await this.getItemTypeOptions();
        await this.getRefreshInterval();

        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();

        // 每个模块定时刷新
        this.setTimer();

        // this.TimeSendMessageFirst && clearInterval(this.TimeSendMessageFirst);
        // this.setTFirst();

        // this.TimeSendMessageSecond && clearInterval(this.TimeSendMessageSecond);
        // this.setTSecond();
    }

    // 获取页面全部数据
    getAllChartsData() {
        // 条目状态
        this.getStateSurvey();
        // 特殊计算
        this.querySpecialurvey();
        // 分母
        this.queryDenominator();
        // 动态维度模板
        this.getDyTemplateSurvey();
        // 动态维度
        this.getDySurvey();
        // 条目同步概况
        this.getSyncSurvey();
        // 条目同步走势
        this.querySyncTrend();
        // 条目同步参数
        this.querySyncParam();
        // 条目配置参数概况
        this.queryEntryConfig();
    }

    // 获取自动刷新频率
    async getRefreshInterval() {
        await getFrequency().then(res => {
            this.refreshFrequencyData = res;
            this.refreshFrequencyData.forEach(ele => {
                // intervalTime 分为单位
                this.refreshFrequencyPojo[ele.moduleKey] = ele.intervalTime * 60;
            });
        });
        console.log(this.refreshFrequencyPojo, 'intervalTime');
    }
    setTimer() {
        // 设置条目状态定时器
        this.TimerEntryStatus && clearInterval(this.TimerEntryStatus);
        this.TimerEntryStatus = setInterval(() => {
            this.getStateSurvey();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-entryStatus'] * 1000);

        // 设置条目同步概况定时器
        this.TimerEntrySync && clearInterval(this.TimerEntrySync);
        // this.setTEntrySync();
        this.TimerEntrySync = setInterval(() => {
            this.getSyncSurvey();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-entrySync'] * 1000);

        // 设置条目配置参数概况定时器
        this.TimerEntryConfigParam && clearInterval(this.TimerEntryConfigParam);
        // this.setTEntryConfigParam();
        this.TimerEntryConfigParam = setInterval(() => {
            this.queryEntryConfig();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-entryConfigParam'] * 1000);

        // 设置条目同步参数定时器
        this.TimerEntrySyncParam && clearInterval(this.TimerEntrySyncParam);
        this.TimerEntrySyncParam = setInterval(() => {
            this.querySyncParam();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-entrySyncParam'] * 1000);

        // 设置条目同步走势定时器
        this.TimerEntrySyncTrend && clearInterval(this.TimerEntrySyncTrend);
        this.TimerEntrySyncTrend = setInterval(() => {
            this.querySyncTrend();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-entrySyncTrend'] * 1000);

        // 设置特殊计算项定时器
        this.TimerSpecial && clearInterval(this.TimerSpecial);
        this.TimerSpecial = setInterval(() => {
            this.querySpecialurvey();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-special'] * 1000);

        // 设置分母定时器
        this.TimerDenominator && clearInterval(this.TimerDenominator);
        this.TimerDenominator = setInterval(() => {
            this.queryDenominator();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-denominator'] * 1000);

        // 设置动态维度模板定时器
        this.TimerDyTemplate && clearInterval(this.TimerDyTemplate);
        this.TimerDyTemplate = setInterval(() => {
            this.getDyTemplateSurvey();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-dyTemplate'] * 1000);

        // 设置动态维度定时器
        this.TimerDynamic && clearInterval(this.TimerDynamic);
        this.TimerDynamic = setInterval(() => {
            this.getDySurvey();
        }, this.refreshFrequencyPojo['ENTRY_MONITOR-dynamic'] * 1000);
    }

    // 条目配置参数概况
    async queryEntryConfig() {
        await getEntryConfig().then((res: any) => {
            this.entryConfigData = res;
            this.entryConfigData.data = this.handleData(this.entryConfigData);
        });
    }

    // 条目状态
    async getStateSurvey() {
        await getStateSurvey().then((res: any) => {
            this.itemStatusData = res;
            this.itemStatusData.data = this.handleData(this.itemStatusData);
        });
    }

    // 特殊计算
    async querySpecialurvey() {
        await querySpecialurvey('1').then((res: any) => {
            this.specialCalculationData = res;
            this.specialCalculationData.data = this.handleData(this.specialCalculationData);
        });
    }

    // 分母
    async queryDenominator() {
        await querySpecialurvey('2').then((res: any) => {
            this.denominatorData = res;
            this.denominatorData.data = this.handleData(this.denominatorData);
        });
    }

    // 动态维度模板
    async getDyTemplateSurvey() {
        await getDyTemplateSurvey().then((res: any) => {
            this.dynamicDenominatorTempData = res;
            this.dynamicDenominatorTempData.data = this.handleData(this.dynamicDenominatorTempData);
        });
    }

    // 动态维度
    async getDySurvey() {
        await getDySurvey().then((res: any) => {
            this.dynamicDenominatorData = res;
            this.dynamicDenominatorData.data = this.handleData(this.dynamicDenominatorData);
        });
    }

    // 条目同步概况
    async getSyncSurvey() {
        await getSyncSurvey().then((res: any) => {
            this.itemSyncOverviewData = res;
            this.itemSyncOverviewData.data = this.handleData(this.itemSyncOverviewData);
        });
    }

    // 条目同步走势
    async querySyncTrend() {
        await querySyncTrend(this.lineParams).then((res: any) => {
            this.itemSyncLineData = res;
            console.log(res, 'res');
            this.dateTimeData = res?.dateTime || [];
        });
    }

    // 条目同步参数
    async querySyncParam() {
        let date = moment(new Date()).format('yyyyMMDD');
        await querySyncParam(date).then((res: any) => {
            this.itemSyncParamsData = res;
        });
    }

    // 获取类别可选对象
    getItemTypeOptions() {
        this.riskEntryTypeObj = {};
        return new Promise((resolve, reject) => {
            this.$axios
                .get('/maintenance/entry/entryType')
                .then((res: any) => {
                    res.forEach(element => {
                        if (element.sourceCode != 'V') {
                            this.riskEntryTypeObj[element.sourceCode] = element.sourceCode + '类';
                        }
                    });
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
    }

    /**
     * 获取图表所需数据
     * @param name 模块名称
     */
    handleChartData(name) {
        let info = {};
        if (name == '条目状态') {
            info = {
                total: this.itemStatusData.total || 0,
                successNum: this.itemStatusData.total ? this.itemStatusData.data[0].value : 0,
                errorNum: this.itemStatusData.total ? this.itemStatusData.data[1].value : 0,
            };
        } else if (name == '特殊计算项') {
            info = {
                total: this.specialCalculationData.total || 0,
                successNum: this.specialCalculationData.total ? this.specialCalculationData.data[0].value : 0,
                errorNum: this.specialCalculationData.total
                    ? this.specialCalculationData.data[1].value + this.specialCalculationData.data[2].value
                    : 0,
            };
        } else if (name == '分母') {
            info = {
                total: this.denominatorData.total || 0,
                successNum: this.denominatorData.total ? this.denominatorData.data[0].value : 0,
                errorNum: this.denominatorData.total ? this.denominatorData.data[1].value + this.denominatorData.data[2].value : 0,
            };
        } else if (name == '动态维度') {
            info = {
                total: this.dynamicDenominatorData.total || 0,
                successNum: this.dynamicDenominatorData.total ? this.dynamicDenominatorData.data[0].value : 0,
                errorNum: this.dynamicDenominatorData.total
                    ? this.dynamicDenominatorData.data[1].value + this.dynamicDenominatorData.data[2].value
                    : 0,
            };
        } else if (name == '动态维度模板') {
            info = {
                total: this.dynamicDenominatorTempData.total || 0,
                successNum: this.dynamicDenominatorTempData.total ? this.dynamicDenominatorTempData.data[0].value : 0,
                errorNum: this.dynamicDenominatorTempData.total
                    ? this.dynamicDenominatorTempData.data[1].value + this.dynamicDenominatorTempData.data[2].value
                    : 0,
            };
        } else if (name == '条目同步概况') {
            info = {
                total: this.itemSyncOverviewData.total || 0,
                successNum: this.itemSyncOverviewData.total ? this.itemSyncOverviewData.data[0].value : 0,
                errorNum: this.itemSyncOverviewData.total ? this.itemSyncOverviewData.data[1].value : 0,
            };
        } else if (name == '条目配置参数概况') {
            info = {
                total: this.entryConfigData.total || 0,
                successNum: this.entryConfigData.total ? this.entryConfigData.data[1].value : 0, // 支持
                errorNum: this.entryConfigData.total ? this.entryConfigData.data[0].value : 0, // 不支持
                partNum: this.entryConfigData.total ? this.entryConfigData.data[2].value : 0, // 部分支持
            };
        } else if (name == '条目同步参数') {
            console.log(this.itemSyncParamsData, 'this.itemSyncParamsData');

            info = {
                failed: this.itemSyncParamsData.failed,
                succeed: this.itemSyncParamsData.succeed,
            };
        } else if (name == '条目同步走势') {
            info = {
                failed: this.itemSyncLineData.failed,
                succeed: this.itemSyncLineData.succeed,
            };
        }
        info = { ...info, name: name };
        return info;
    }

    /**
     * 各个模块数量显示处理
     * @param datas 总数据
     * @param dataIndex 要显示的数据下标
     */
    handleShowCount(datas, dataIndex) {
        if (datas?.total) {
            return datas?.data[dataIndex].value;
        } else {
            return 0;
        }
    }

    // 处理接口数据
    handleData(data: any) {
        let items = data.items || [];
        return items.map((item: any) => {
            item.name = item.itemStatusName;
            item.value = item.itemCount;
            if (item.itemCount == 0) {
                item.percent = 0.0;
            } else {
                item.percent = ((item.itemCount / data.total) * 100).toFixed(2);
            }
            return item;
        });
    }

    // 生成走势图回调
    async generateTrend(timeRange: any) {
        this.lineParams = timeRange;
        this.itemSyncLineData = await querySyncTrend(timeRange);
    }

    screenAdapter() {
        setTimeout(() => {
            const titleFontSize = ((this.$refs.itemStatus as any).offsetWidth / 100) * 5.6;
            // 分辨率变化图表配置
            const adapterOption = {
                axisLabel: {
                    textStyle: {
                        fontSize: titleFontSize,
                    },
                },
            };
            this.chartInstanceArr.forEach(ele => {
                ele.setOption(adapterOption);
                ele.resize();
            });
        }, 200);
    }

    NumAutoPlusAnimation(targetEle, options) {
        options = options || {};
        const $this = document.getElementById(targetEle);
        const time = options.time; // || $this.data('time') // 总时间--毫秒为单位
        const finalNum = options.num; // || $this.data('value') // 要显示的真实数值
        const regulator = options.regulator || 100; // 调速器，改变regulator的数值可以调节数字改变的速度
        const step = finalNum / (time / regulator); /* 每30ms增加的数值-- */
        let count = options.count; // 计数器
        if (options.percentum) {
            count = options.count2;
        }
        let initial: any = 0;

        const timer = setInterval(function() {
            // 递增 或 递减
            if (count < finalNum) {
                count = Number(count) + Number(step);
                if (count >= finalNum) {
                    clearInterval(timer);
                    count = finalNum;
                }
            } else {
                // console.log(count, finalNum, '9999999999999999');
                count = count - step;
                if (count <= finalNum) {
                    clearInterval(timer);
                    count = finalNum;
                }
            }
            // t未发生改变的话就直接返回
            // 避免调用text函数，提高DOM性能
            // let t = Math.floor(count);
            let t = count;
            t = numberFormat(t, 2);
            // if (t == initial) return;

            if (options.percentum) {
                initial = t + '%';
            } else {
                initial = t;
            }
            $this.innerHTML = initial;
        }, 30);
    }

    // 当前高亮数据
    getHighlightItem(args) {
        let name = args[1];
        const percent = args[0].percent;
        if (name == '特殊计算项') {
            this.NumAutoPlusAnimation('fake-num1', {
                time: 2900,
                num: percent,
                regulator: 50,
                count: this.percent1,
                count2: 0,
                percentum: true,
            });

            this.percent1 = JSON.parse(JSON.stringify(args[0].percent));
            this.seriesName1 = args[0].name;
            this.seriesvalue1 = args[0].value;
        } else if (name == '分母') {
            this.percent2 = args[0].percent;
            this.seriesName2 = args[0].name;
            this.seriesvalue2 = args[0].value;
            this.NumAutoPlusAnimation('fake-num2', { time: 2900, num: this.percent2, regulator: 50, count: 0, count2: 0, percentum: true });
        } else if (name == '动态维度') {
            this.percent4 = args[0].percent;
            this.seriesName4 = args[0].name;
            this.seriesvalue4 = args[0].value;
            this.NumAutoPlusAnimation('fake-num4', { time: 2900, num: this.percent4, regulator: 50, count: 0, count2: 0, percentum: true });
        } else if (name == '动态维度模板') {
            this.percent3 = args[0].percent;
            this.seriesName3 = args[0].name;
            this.seriesvalue3 = args[0].value;
            this.NumAutoPlusAnimation('fake-num3', { time: 2900, num: this.percent3, regulator: 50, count: 0, count2: 0, percentum: true });
        }
    }

    // 打开明细对话框
    openDetailDialog(name: string, args: any) {
        let info = this.handleChartData(name);
        this.info = info;
        this.detailShow = true;
    }

    // 刷新页面
    /**
     * 刷新页面
     * @param name 刷新模块名称
     * @param passiveRefresh 是否被动刷新
     */
    async refresh(name: string, passiveRefresh?: boolean) {
        if (name == '条目状态') {
            (this.$refs['itemStatus'] as any).dispose();
            await this.getStateSurvey();
        } else if (name == '特殊计算项') {
            (this.$refs['specialCalculation'] as any).dispose();
            await this.querySpecialurvey();
        } else if (name == '分母') {
            (this.$refs['denominator'] as any).dispose();
            await this.queryDenominator();
        } else if (name == '动态维度') {
            (this.$refs['dynamicDimension'] as any).dispose();
            await this.getDySurvey();
        } else if (name == '动态维度模板') {
            (this.$refs['dynamicDimensionTemplate'] as any).dispose();
            await this.getDyTemplateSurvey();
        } else if (name == '条目同步概况') {
            (this.$refs['itemSyncOverview'] as any).dispose();
            await this.getSyncSurvey();
        } else if (name == '条目同步走势') {
            (this.$refs['itemSyncTrend'] as any).dispose();
            await this.querySyncTrend();
        } else if (name == '条目同步参数') {
            (this.$refs['itemSyncParam'] as any).dispose();
            await this.querySyncParam();
        } else if (name == '条目配置参数概况') {
            (this.$refs['entryConfig'] as any).dispose();
            await this.queryEntryConfig();
        }
        if (!passiveRefresh) {
            this.yh_message_success('刷新成功');
        } else {
            let info = this.handleChartData(name);
            this.info = info;
        }
        this.chartInstanceArr = [];
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
    }

    // 设置打字机效果
    // handleSetTypeTool(j, arr, dom) {
    //     if (j < arr.length) {
    //         // 当达到数组长度时，就从头开始继续
    //         const item = arr[j];
    //         const itemLen = item.length; // 汉字是占两个ch
    //         dom.innerHTML = item; // 显示文字
    //         for (let i = 0, len = itemLen; i < len; i++) {
    //             // 添加文本效果
    //             let textLen = dom.textContent.length;
    //             let s = dom.style;
    //             s.animationTimingFunction = 'steps(' + textLen + '),steps(1)'; // 动态设置steps
    //             s.animationName = `typing${itemLen}`; // 文本长度不同，展示的宽度就不同，所以需要动态设置
    //             s.animationDuration = `${itemLen / 2}s,3s`; // 这儿设置速度
    //         }
    //         setTimeout(() => {
    //             if (j <= arr.length) {
    //                 this.handleSetTypeTool(j + 1, arr, dom);
    //             }
    //         }, itemLen * 3000); // 这儿和上面的animationDuration速度一致，只不过这儿是毫秒，所以要乘以1000
    //     }
    //     // else {
    //     //     this.handleSetTypeTool(0, arr, dom); // 就从头开始继续
    //     // }
    // }

    // 同步明细回调
    itemSyncDetailHandle() {
        this.detailShow = false;
    }

    // 同步明细数据数量变化回调
    getDetailDataChange(args: any) {
        // 被动刷新图表数据
        this.refresh(args, true);
    }

    // 清除定时器
    beforeDestroy() {
        if (this.TimerEntryStatus) {
            this.TimerEntryStatus && clearInterval(this.TimerEntryStatus);
            this.TimerEntryStatus = null;
        }
        if (this.TimerEntrySync) {
            this.TimerEntrySync && clearInterval(this.TimerEntrySync);
            this.TimerEntrySync = null;
        }
        if (this.TimerEntryConfigParam) {
            this.TimerEntryConfigParam && clearInterval(this.TimerEntryConfigParam);
            this.TimerEntryConfigParam = null;
        }
        if (this.TimerEntrySyncParam) {
            this.TimerEntrySyncParam && clearInterval(this.TimerEntrySyncParam);
            this.TimerEntrySyncParam = null;
        }
        if (this.TimerEntrySyncTrend) {
            this.TimerEntrySyncTrend && clearInterval(this.TimerEntrySyncTrend);
            this.TimerEntrySyncTrend = null;
        }
        if (this.TimerSpecial) {
            this.TimerSpecial && clearInterval(this.TimerSpecial);
            this.TimerSpecial = null;
        }
        if (this.TimerDenominator) {
            this.TimerDenominator && clearInterval(this.TimerDenominator);
            this.TimerDenominator = null;
        }
        if (this.TimerDyTemplate) {
            this.TimerDyTemplate && clearInterval(this.TimerDyTemplate);
            this.TimerDyTemplate = null;
        }
        if (this.TimerDynamic) {
            this.TimerDynamic && clearInterval(this.TimerDynamic);
            this.TimerDynamic = null;
        }
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style lang="scss" scoped>
// keyframes 可根据展示的文本长度，自行添加，我的格式为： @keyframes  ‘type’+'文本长度'
@keyframes typing2 {
    from {
        width: 0;
    }
    50% {
        width: 2ch;
    }
    100% {
        width: 0;
    }
}
@keyframes typing4 {
    from {
        width: 0;
    }
    50% {
        width: 4ch;
    }
    100% {
        width: 0;
    }
}
@keyframes typing7 {
    from {
        width: 0;
    }
    50% {
        width: 7ch;
    }
    100% {
        width: 0;
    }
}
@keyframes caret {
    50% {
        border-color: transparent;
    }
}
h1 {
    width: 0;
    animation: typing 3s;
    // animation: typing 3s steps(15) infinite, caret 3s steps(1) infinite;
    white-space: nowrap;
    overflow: hidden;
    // border-right: 0.05em solid;
    // font-family: Consolas, Monaco, monospace; //注意这儿，要设置字体为等宽字体,ch才会充分发挥效果
}

.com-container {
    background-color: #071330;
    width: 100%;
    min-width: 1300px;
    height: 100%;
    // min-height: 695px;
    min-height: 783px;
    .header {
        width: 100%;
        height: 70px;
        background-image: url('./images/entry-monitor/title-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;

        .title {
            width: fit-content;
            position: relative;
            > span {
                color: rgb(247, 207, 127);
                font-family: PangMenZhengDao;
                justify-content: center;
                font-size: 32px;
                line-height: 62px;
            }
        }
        .title-icon {
            height: 70px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: url('./images/entry-monitor/title-icon.webp');
            opacity: 1;
            filter: hue-rotate(217deg);
            background-position-x: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }
    .title {
        color: #1980fc;
        text-align: center;
    }
    .imgSize {
        width: 100%;
    }
    .content {
        display: flex;
        height: calc(100% - 81px);
        padding: 10px;
        .content-title {
            display: flex;
            // justify-content: center;
            line-height: 3px;
            color: #ffefd0;
            font-weight: bold;
            font-family: 'Source Han Sans-FVS Normal';
            font-size: 12px;
            padding: 0 35px;
            position: absolute;
            left: 65%;
            top: 3%;
        }
        .left-content {
            position: relative;
            padding-top: 10px;
            height: 100%;
            width: 24%;
            background-image: url('./images/entry-monitor/left-box.png');
            background-size: 100% 103%;
            background-repeat: no-repeat;
            .content-title {
                left: 50%;
            }
            .left-content-item {
                position: relative;
                height: 30%;
                .chart-label {
                    position: absolute;
                    right: 10%;
                    top: 55%;
                    // font-size: 14px;
                    .chart-label-item {
                        margin-bottom: 5px;
                        > span {
                            color: #fff;
                            font-size: 16px;
                        }
                    }
                }
            }
            .item-title {
                > div {
                    // height: 35px;
                    width: 90%;
                    background-image: url('./images/entry-monitor/right-border.png');
                    // background-size: 100% 90%;
                    // background-size: contain;
                    background-repeat: no-repeat;
                    filter: hue-rotate(0deg);
                    transform: rotate(180deg);
                    margin-left: 10px;
                    // transform: rotateY(180deg);
                }
            }

            .left-item-title {
                display: flex;
                // justify-content: center;
                line-height: 3px;
                color: #ffefd0;
                font-weight: bold;
                font-family: 'Source Han Sans-FVS Normal';
                font-size: 12px;
                padding: 0 35px;
            }
            .item-title {
                margin-top: 25px;
            }
        }
        .center-content {
            width: 52.5%;
            .center-content-item {
                position: relative;
                margin: 10px;
                padding: 10px;
                height: calc(50% - 10px);
                background-image: url('./images/entry-monitor/center-box.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                > div:last-child {
                    background-image: url('./images/entry-monitor/center-inner-box.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    margin-top: 22px;
                    height: calc(100% - 20px);
                }
                .center-item-title {
                    display: flex;
                    justify-content: center;
                    line-height: 3px;
                    color: #ffefd0;
                    font-weight: bold;
                    font-family: 'Source Han Sans-FVS Normal';
                    font-size: 12px;
                }
            }

            /deep/ .el-input__icon {
                color: #fff;
            }
        }

        .right-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            height: 100%;
            background-image: url('./images/entry-monitor/left-box.png');
            background-size: 100% 103.2%;
            background-repeat: no-repeat;
            transform: scaleX(-1);
            width: 100%;
        }
        .right-content {
            height: 100%;
            position: relative;
            width: 24%;
            padding-top: 35px;
            .content-title {
                left: 20%;
            }
            .right-content-item {
                position: relative;
                height: 25%;
                .right-item-chart {
                    height: calc(100% - 30px);
                }
                .pieText {
                    position: absolute;
                    margin: 0 auto;
                    left: 21%;
                    right: 59%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    top: 40%;
                    min-width: 80px;
                    width: 20%;
                    text-align: center;
                    > span {
                        color: #fff;
                        font-size: 12px;

                        width: 0;
                        animation: typing 3s steps(10) infinite;
                        // animation: typing 2s steps(20) infinite, caret 2s steps(1) infinite;
                        white-space: nowrap;
                        overflow: hidden;
                        // border-right: 0.05em solid;
                        // font-family: Consolas, Monaco, monospace; //注意这儿，要设置字体为等宽字体,ch才会充分发挥效果
                    }
                    @keyframes typing {
                        from {
                            width: 0;
                        }
                        to {
                            width: 110%;
                        }
                    }

                    .fakeName {
                        font-size: 18px;
                        color: #fff;
                    }
                }
            }
            .left-item-title {
                // display: flex;
                // justify-content: flex-end;
                margin-right: 10%;
                text-align: right;
                line-height: 3px;
                color: #ffefd0;
                font-weight: bold;
                font-family: 'Source Han Sans-FVS Normal';
                font-size: 12px;
            }
        }
        .item-title {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-items: center;
            // margin-top: 25px;
            > div {
                height: 20px;
                width: 85%;
                background-image: url('./images/entry-monitor/right-border.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                // filter: hue-rotate(0deg);
                transform: rotateX(180deg);
                margin: auto;
            }
        }
    }
    .chart-btn {
        z-index: 1;
        position: absolute;
        display: flex;
        right: 7%;
        > div {
            width: 32px;
            height: 32px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        .chart-btn-refresh {
            cursor: pointer;
            background-image: url('./images/entry-monitor/refresh-icon.png');
        }
        .chart-btn-detail {
            cursor: pointer;
            background-image: url('./images/entry-monitor/detail-icon.png');
        }
    }
    .chart-btn1 {
        z-index: 1;
        position: absolute;
        height: fit-content !important;
        top: 9%;
        .chart-btn-refresh {
            cursor: pointer;
            width: 32px;
            height: 32px;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: url('./images/entry-monitor/refresh-icon.png');
        }
    }
}

/deep/ .el-card {
    height: 100%;
    .el-card__body {
        padding: 2px !important;
        width: 100%;
        height: 100%;
    }
}
/deep/ .el-picker-panel {
    background-color: #191e2d !important;
    border: none;
}
</style>
<style lang="scss">
/deep/ .el-picker-panel {
    background-color: #191e2d !important;
    border: none;
}
</style>
